<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<div th:insert="~{common/common::common}"/>
<head>
    <meta charset="UTF-8">
    <title>各省份TOP3热门广告汇总</title>
    <script src = "../../static/js/echarts.js"></script>
</head>
<body>
<div th:replace="~{common/leftnavbar::leftnav}"></div>
<div class="layui-body" style="padding-left:75px;">
    <!--        <input type="date" name="mydate" id="mydate" value="2023-08-11" style="width: 200px; height: 30px; font-size: 20px">-->
    <div class="demoTable" style="padding-top: 10px; font-size: 150%">
        请输入你想搜索的省份名称(默认显示广东地区)<br>
        <div class="layui-inline">
            <input class="layui-input" name="id" id="demoReload" autocomplete="off">
        </div>
        <button class="layui-btn" id = "btn" data-type="reload">搜索</button>
    </div>

    <div id="chart_box" style="width: 1250px;height:550px;margin:0 auto;"></div>

</div>
</body>


<script th:inline="javascript">
    var dom = document.getElementById("chart_box");
    var myChart = echarts.init(dom);

    mychart1('广东');
    document.getElementById('btn').addEventListener('click',function(){
        var demoReload = document.getElementById('demoReload')
        var province = demoReload.value
        mychart1(province);
    });

    function mychart1(province) {
        //var areatmp = document.getElementById("areaSelect").value;
        axios.get('/proTop3Ad', {
            params: {
                province: province
            }
        })
            .then(function (res) {
                //console.log("----------------------------------");
                console.log("res:" + res);
                var legendData = [], seriesData = [], selected = {};
                for (var i = 0; i < res.data.length; i++) {
                    var name = "省份-" + res.data[i].province + "    广告id-" + res.data[i].adid;
                    legendData.push(name);
                    seriesData.push({
                        name: name,
                        value: res.data[i].clickCount
                    });
                    selected[name] = i < res.data.length;
                    //console.log(res.data[i].productid);
                }
                console.log(legendData);
                console.log(seriesData);
                option = {
                    title: {
                        text: province+"前三热门广告",
                        subtext: '统计结果如下',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        type: 'scroll',
                        orient: 'vertical',
                        right: 10,
                        top: 20,
                        bottom: 20,
                        data: legendData,
                        selected: selected
                    },
                    series: [
                        {
                            name: '广告信息',
                            type: 'pie',
                            radius: '55%',
                            center: ['40%', '50%'],
                            data: seriesData,
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                myChart.setOption(option, true);
            })
            .catch(function (error) {
                console.log(error);
            });
    }

    //mychart1();

    function accessfunc() {
        if (document.getElementById("access").getAttribute("class")=="layui-nav-item layui-nav-itemed"){
            document.getElementById("access").setAttribute("class", "layui-nav-item");
        } else {
            document.getElementById("access").setAttribute("class", "layui-nav-item layui-nav-itemed");
        }
    }
    function categoryfunc() {
        if (document.getElementById("category").getAttribute("class")=="layui-nav-item layui-nav-itemed"){
            document.getElementById("category").setAttribute("class", "layui-nav-item");
        } else {
            document.getElementById("category").setAttribute("class", "layui-nav-item layui-nav-itemed");
        }
    }
</script>
</html>